import { Component, Prop, Watch } from 'vue-property-decorator';

import { isNumeric } from '../../vendors/handie';

import BaseEnumFieldHeadlessWidget from './BaseEnumField';

@Component
export default class EnumFieldHeadlessWidget extends BaseEnumFieldHeadlessWidget<number | string> {
  @Prop({ type: [Number, String], default: '' })
  protected readonly value!: number | string;

  protected internalValue: number | string = '';

  protected get displayText(): string {
    const chosen = this.options.find(opt =>
      isNumeric(opt.value) && isNumeric(this.value)
        ? Number(opt.value) === Number(this.value)
        : opt.value === this.value,
    );

    return chosen ? chosen.label : '';
  }

  @Watch('value', { immediate: true })
  private handleValueChange(): void {
    this.internalValue = this.value;
  }
}
